<template>
  <div class="ele-body">
    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="游戏库存" name="first">
          <!-- 搜索表单 -->
          <el-form style="margin-top: 10px"
                   :model="recordWhere"
                   label-width="77px"
                   class="ele-form-search"
                   @keyup.enter.native="reload"
                   @submit.native.prevent>
            <el-row :gutter="15">
              <el-col :lg="6" :md="12">
                <el-form-item label="所有游戏:">
                  <el-input
                    v-model="recordWhere.KindID"
                    placeholder="请选择游戏"
                    clearable/>
                </el-form-item>

              </el-col>
              <el-col :lg="6" :md="12">
                <el-form-item label="所有房间:">
                  <el-input
                    v-model="recordWhere.ServerID"
                    placeholder="请选择房间"
                    clearable/>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12">
                <div class="ele-form-actions">
                  <el-button
                    type="primary"
                    @click="reload"
                    icon="el-icon-search"
                    class="ele-btn-icon">查询
                  </el-button>
                  <el-button @click="reset">重置</el-button>
                </div>
              </el-col>
            </el-row>
          </el-form>
          <!-- 数据表格 -->
          <ele-pro-table
            v-if="activeName === 'first'"
            ref="table"
            :where="where"
            :datasource="url"
            :columns="columns"
            :need-page="false"
            height="calc(100vh - 270px)">
            <!-- 操作列 -->
            <template slot="action" slot-scope="{row}">
              <el-link
                type="primary"
                :underline="false"
                icon="el-icon-edit"
                @click="openEdit(row)">修改库存
              </el-link>
            </template>
          </ele-pro-table>

        </el-tab-pane>

        <el-tab-pane label="库存修改记录" name="second">
          <!-- 搜索表单 -->
          <el-form style="margin-top: 10px"
                   :model="recordWhere"
                   label-width="77px"
                   class="ele-form-search"
                   @keyup.enter.native="reload"
                   @submit.native.prevent>
            <el-row :gutter="15">
              <el-col :lg="4" :md="12">
                <el-form-item label="所有游戏:">
                  <el-input
                    v-model="recordWhere.KindID"
                    placeholder="请选择游戏"
                    clearable/>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="12">
                <el-form-item label="所有房间:">
                  <el-input
                    v-model="recordWhere.KindID"
                    placeholder="请选择房间"
                    clearable/>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="12">
                <el-form-item label="开始时间:">
                  <el-input
                    v-model="recordWhere.KindID"
                    placeholder="请选择开始时间"
                    clearable/>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="12">
                <el-form-item label="结束时间:">
                  <el-input
                    v-model="recordWhere.KindID"
                    placeholder="请选择结束时间"
                    clearable/>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12">
                <div class="ele-form-actions">
                  <el-button
                    type="primary"
                    @click="reload"
                    icon="el-icon-search"
                    class="ele-btn-icon">查询
                  </el-button>
                  <el-button @click="reset">重置</el-button>
                </div>
              </el-col>
            </el-row>
          </el-form>
          <ele-pro-table
            v-if="activeName === 'second'"
            ref="table"
            :page-size="20"
            :datasource="recordUrl"
            :columns="recordColumns"
            :where="recordWhere"
            height="calc(100vh - 315px)">
          </ele-pro-table>

        </el-tab-pane>
      </el-tabs>


    </el-card>
    <!-- 编辑弹窗 -->
    <stock-edit
      :data="current"
      :visible.sync="showEdit"
      @done="reload"/>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import StockEdit from './stock-edit.vue';

export default {
  name: 'SystemGameStock',
  components: {StockEdit},
  computed: {
    ...mapGetters(["permission"]),

  },
  data() {
    return {
      // 表格数据接口
      url: '/admin/control.gamestock/index',
      recordUrl: '/admin/control.gamestockrecord/index',
      activeName: 'first',
      // 表格列配置
      columns: [
        {
          columnKey: 'selection',
          type: 'selection',
          width: 45,
          align: 'center',
          fixed: "left"
        },
        {
          prop: 'GameName',
          label: '游戏名称',
          minWidth: 100,
          align: 'center',
          showOverflowTooltip: true,
          fixed: "left"
        },

        {
          prop: 'RoomName',
          label: '房间名称',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100
        },
        {
          prop: 'Stock',
          label: '库存数额',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 200,
          align: 'center',
          resizable: false,
          slot: 'action',
          fixed: "right"
        }
      ],
      recordColumns: [
        {
          columnKey: 'selection',
          type: 'selection',
          width: 45,
          align: 'center',
          fixed: "left"
        },
        {
          prop: 'ID',
          label: 'ID',
          width: 60,
          align: 'center',
          showOverflowTooltip: true,
          fixed: "left"
        },

        {
          prop: 'ModifyTime',
          label: '时间',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100
        },
        {
          prop: 'ServerID',
          label: '游戏',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100
        },
        {
          prop: 'ServerID',
          label: '游戏房间',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100
        },
        {
          prop: 'ModifyStock',
          label: '库存',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100
        },
        {
          prop: 'UserID',
          label: '操作人',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100
        },
      ],
      // 表格搜索条件
      where: {},
      recordWhere: {},
      // 当前编辑数据
      current: null,
      // 是否显示编辑弹窗
      showEdit: false,
      // 筛选日期范围
      // daterange: null,
      // 日期时间选择器快捷项
      // stockData: [],
    };
  },
  methods: {
    /* 刷新表格 */
    reload() {
      this.$refs.table.reload({where: this.where});
    },
    handleClick(tab, event) {
      console.log(tab.name)
      // this.reload();
      console.log(tab, event);
    },
    // stockData() {
    //   this.$http.post('/admin/control.gamestock/index', this.form).then(res => {
    //     this.loading = false;
    //     if (res.data.code === 0) {
    //       this.$message({type: 'success', message: res.data.msg});
    //
    //       this.stockData = res.data
    //       console.log(res.data)
    //     } else {
    //       this.$message.error(res.data.msg);
    //     }
    //   }).catch(e => {
    //     this.loading = false;
    //     this.$message.error(e.message);
    //   });
    // },
    /* 重置搜索 */
    reset() {
      this.where = {};
      this.daterange = null;
      this.reload();
    },
    openEdit(row) {
      this.current = row;
      this.showEdit = true;
    },
    /* 日期选择改变回调 */
  }
}
</script>

<style scoped>
</style>
